<template>
  <div id="category">
    <van-tree-select :items="items" :main-active-index="mainActiveIndex" :active-id="activeId" @navclick="onNavClick" @itemclick="onItemClick"
    />
  </div>
</template>
<script>
import {
  TreeSelect
} from 'vant'
export default {
  components: {
    [TreeSelect.name]: TreeSelect
  },
  data () {
    return {
      items: [
        {
          // 导航名称
          text: '所有城市',
          // 该导航下所有的可选项
          children: [
            {
              // 可选项的名称
              text: '温州',
              // 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
              id: 1002
            },
            {
              // 可选项的名称
              text: '杭州',
              // 可选项的id，高亮的时候是根据id是否和选中的id是否相同进行判断的
              id: 1001
            }
          ]
        }
      ],
      // 左侧高亮元素的index
      mainActiveIndex: 0,
      // 被选中元素的id
      activeId: 1001
    };
  },
  methods: {
    onNavClick (index) {
      this.mainActiveIndex = index;
    },
    onItemClick (data) {
      this.activeId = data.id;
    }
  }
}

</script>
